<template>
  <!-- {{ $router.options.routes }} -->
  <el-menu :default-active="$route.path" active-text-color="#ffd04b" background-color="#d9ecff" class="el-menu-vertical-demo" 
    text-color="black" :router="true">
    <template v-for="item in $router.options.routes">
    <!--一级菜单-->
    <el-menu-item :index="item.path" v-if="item.children == undefined && item.meta?item.meta.show==true:''">
      <component :is="item.meta?item.meta.icon:''" class="icon"></component>
      <span>{{ item.meta ? item.meta.title:'' }}</span>
    </el-menu-item>
    
    <!---->
    <el-sub-menu :index="item.path" v-if="item.children != undefined && item.meta ? item.meta.show == true : ''">
      <template #title>
        <component :is="item.meta?item.meta.icon:''" class="icon"></component>
        <span>{{ item.meta ? item.meta.title : '' }}</span>
      </template>
      <el-menu-item-group>
        <template v-for="item2 in item.children">
        <el-menu-item :index="item2.path" v-if="item2.meta?item2.meta.show==true:''">
          <component :is="item2.meta?item2.meta.icon:''" class="icon"></component>
         {{ item2.meta ? item2.meta.title:''}}
        </el-menu-item>
      </template>
      </el-menu-item-group>
    </el-sub-menu>
    </template>
  </el-menu>
</template>
<script setup lang="ts">

</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: calc(100vh - 40px);
}
.icon{
  width: 20px;
  height: 20px;
  padding-right: 10px;
}
</style>